<template>
	<div class="home">
		<logintop middletop="登录bilibili"><div slot="right" @click="getlogin" class="right">注册</div></logintop>
		<logintext
			class="logintext"
			label="账号"
			placeholder="请输入账号"
			rule="^.{6,16}$"
			@inputchange="
				res => {
					username = res;
				}
			"
		></logintext>
		<logintext
			class="logintext"
			label="密码"
			placeholder="请输入密码"
			type="password"
			rule="^.{6,16}$"
			@inputchange="
				res => {
					password = res;
				}
			"
		></logintext>
		<loginbtn btntext="登录" @registerbtn="registerbtn"></loginbtn>
	</div>
</template>

<script>
import logintop from '@/components/common/logintop.vue';
import logintext from '@/components/common/logintext.vue';
import loginbtn from '@/components/common/loginbtn.vue';

export default {
	data() {
		return {
			// name: '',
			placeholder: '',
			username: '',
			password: ''
		};
	},
	components: {
		logintop,
		logintext,
		loginbtn
	},
	methods: {
		successinput(text) {
			this.name = text;
		},
		async registerbtn() {
			// console.log('aaa')
			if (this.username && this.password) {
				const res = await this.$http.post('/login', {
					name: this.name,
					username: this.username,
					password: this.password
				});
				console.log(res);
				this.$msg.fail(res.data.msg);
				// 登录成功后跳转到个人中心页
				if (res.data.msg == '登录成功') {
					localStorage.setItem('id', res.data.id);
					localStorage.setItem('token', res.data.token);
					setTimeout(() => {
						this.$router.push('/userinfo');
					}, 1000);
				}
			} else {
				this.$msg.fail('格式不正确,请重新输入');
			}
		},
		getlogin() {
			this.$router.push('/register');
		}
	}
};
</script>
<style>
.logintext {
	margin: 15px 0;
}
.right {
	font-size: 13px !important;
}
</style>
